<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 需求 描述一只猫的名称，颜色，叫声，技能


    // 面向过程  => 分析问题 解决问题
    var name = "Tom";
    var color = "black";
    function call() {
        console.log("喵喵");
    }
    function skill() {
        console.log("捉老鼠");
    }


    // 面向对象  =>   就是将你的需求抽象成一个对象,然后针对这个对象分析其特征(属性)与行为(方法)--这个对象就称之为类(面向对象)  把构造成问题的事物(要做的或所做的时),分解成各个对象,建立对象的目的是为了描述在解决问题中的步骤和行为

    // 1. 字面量对象 (最简单的面向对象 -> 可以理解为把面向过程中的变量 和 函数 整合到对象中 => 作为对象的属性和方法 )
    // 缺点: 只能描述一只猫的相关属性和方法, 描述另一只还有重新创建


    // var Tom = {
    //     name: "Tom",
    //     color: "black",
    //     species: "Cat",
    //     call: function () {
    //         console.log("喵喵");
    //     },
    //     skill: function () {
    //         console.log("捉老鼠");
    //     }
    // }
    // console.log(Tom);

    // var Kitty = {
    //     name: "Kitty",
    //     color: "pink",
    //     species: "Cat",
    //     call: function () {
    //         console.log("喵喵");
    //     },
    //     skill: function () {
    //         console.log("捉老鼠");
    //     }
    // }
    // console.log(Kitty);

    // 2. 将对象进行函数封装
    // 优点: 根据传入的参数快速生成对象 
    // 缺点:
    // 1. 通过函数创建的对象和函数没有关系 (简单来说 不是构造函数本身创建的)
    // var arr = new Array();
    // console.log(arr instanceof Array);  // true

    // var obj = new Object();
    // console.log(obj instanceof Object); // true


    // 2. 公有的属性和方法重复创建(赋值给每个对象)  -> 占内存 


    function cat(name, color) {
        var obj = {   // new Object()
            name: name,
            color: color,
            species: "Cat",
            call: function () {
                console.log("喵喵");
            },
            skill: function () {
                console.log("捉老鼠");
            }
        }
        return obj;
    }

    var Tom = cat("Tom", "black");
    console.log(Tom);
    console.log(Tom instanceof cat, Tom instanceof Object); // false  true

    var Kitty = cat("Kitty", "black");
    console.log(Kitty);
    console.log(Kitty instanceof cat, Kitty instanceof Object);// false  true



</script>

</html>